<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器回顾</title>
    <style type="text/css">
        /* 基础选择器 */
        /* 1. 标签选择器 */
        div{
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
        p{
            background-color: brown;
            width: 100px;
            height: 100px;
        }
        /* 2. id选择器 */
        #dragger{
            background-color: aquamarine;
        }
        /* 3. 类选择器 */
        .item{
            background-color: blueviolet;
        }
        /* 4. 包含选择器 */
        div1 span{
            font-size: 20px;
            font-weight: bold;
        }
        /* 5. 子选择器 */
        #div11>p{
            display: block;
            width: 150px;
            height: 150px;
            background-color: cadetblue;
        }
        /* 6. 选择器分组 */
        #div2, #p2{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1>CSS选择器回顾</h1>
    <div>模块,标签选择器</div>
    <div id="dragger">模块,id选择器</div>
    <div class="item">模块,类选择器</div>
    <div1>
        <p>
        <span><i>模块,包含选择器</i></span>
        </p>
    </div1>
    <div id="div11"><p><span>模块,子选择器</span></p></div>
    <div id="div2"><p id="p2">
        <span>选择器分组</span>
    </p></div>
</body>
</html>